<%--
  User: naim
  Date: Dec 23, 2009
--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="/c.tld" %>
<html>
<head>
    <title>DSE ALERT!</title>
    <link href="/css/common.css" rel="stylesheet" type="text/css">
    <link href="/css/jquery.autocomplete.css" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script>


<script type="text/javascript">
    var otherItems =[];
    <%--@elvariable id="otherItems" type="java.util.List"--%>
    <c:forEach items="${otherItems}" var="item">
            otherItems.push('${item}');
    </c:forEach>
</script>

</head>
<body>


<div id="container">
    <%@ include file="/header.jsp" %>

    <div>

        <div id="page-header">
            Subscription List
        </div>

        <div>
            <%--@elvariable id="currentItems" type="net.stock.db.StockItem"--%>
            <c:choose>
                <c:when test="${empty currentItems}">
                    <div class="msg">
                        You have not yet added any stock item to receive notification! Please add one.
                    </div>
                </c:when>
                <c:otherwise>
                    <table width="100%">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>My Price</th>
                                <th>Low</th>
                                <th>High</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <c:forEach items="${currentItems}" var="si" varStatus="loopStatus">
                            <tr>
                                <td class="data">
                                        ${si.name}
                                </td>
                                <td class="data">
                                        ${si.myPrice}
                                </td>
                                <td class="data">
                                        ${si.low}
                                </td>
                                <td class="data">
                                        ${si.high}
                                </td>
                                <td>
                                    <a href="#" onclick="editThis('${si.id}', '${si.name}', '${si.myPrice}', '${si.low}', '${si.high}')">Edit</a>
                                    &nbsp;|&nbsp;
                                    <a href="<c:url value='/stock/deleteItem?id=${si.id}'/>">Delete</a>
                                </td>
                            </tr>
                        </c:forEach>
                    </table>
                </c:otherwise>
            </c:choose>
        </div>
        <hr/>
        <br/>

        <div>
            Subscribe to New Item:
        </div>

        <form action="<c:url value="/stock/addItem"/>" onsubmit="return validate();" method="post" id="addStockItemForm">
            <input type="hidden" value="" name="stockItemId" id="stockItemId">
            <table width="100%">
                <tr>
                    <td class="label">
                        Company Code:
                    </td>
                    <td>
                        <input type="text" value="" name="stockItemName" id="stockItemName">
                    </td>
                </tr>
                <tr>
                    <td class="label">
                        I bought it at:
                    </td>
                    <td>
                        <input type="text" value="" name="stockItemMyPrice" id="stockItemMyPrice">
                    </td>
                </tr>
                <tr>
                    <td class="label">
                        Notify me when goes below:
                    </td>
                    <td>
                        <input type="text" value="" name="stockItemLow" id="stockItemLow" width="5" maxlength="5">
                    </td>
                </tr>
                <tr>
                    <td class="label">
                        Notify me when goes beyond:
                    </td>
                    <td>
                        <input type="text" value="" name="stockItemHigh" id="stockItemHigh" width="5" maxlength="5">
                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="button">
                        <input type="submit" name="saveButton" value="Save">
                    </td>
                </tr>
            </table>
        </form>
    </div>

    <div class="msg">
        <ul>
            <li>
                After adding
                <span style="font-weight:bold;font-style:italic;background-color:gold;">dse-alert@appspot.com</span>
                to any XMPP client, you may send one or more Company Codes (comma/space separated) as a chat message
                to receive the current price list as a reply.
            </li>

            <li>
                After adding
                <span style="font-weight:bold;font-style:italic;background-color:gold;">dse-alert@appspot.com</span>
                to your 'Google Chat' client, you may recieve automatic notifications.
            </li>
        </ul>
    </div>

<%@ include file="/footer.jsp"%>
</div>

<script type="text/javascript">
    $().ready(function() {
        $("#stockItemName").autocomplete(otherItems, {
                matchContains: true,
                minChars: 0,
                mustMatch:true
            });
    });

    function validate() {
        var name = $("#stockItemName").attr("value");
        var low = $("#stockItemLow").attr("value");
        var high = $("#stockItemHigh").attr("value");
        if (!name || name.length == 0) {
            alert("Enter a Company Code!");
            return false;
        }
        if (low.length > 0 && isNaN(parseFloat(low))) {
            alert("This field should either be empty or a number!");
            return false;
        }
        if (high.length > 0 && isNaN(parseFloat(high))) {
            alert("This field should either be empty or a number!");
            return false;
        }
        return true;
    }

    function editThis(id, name, myPrice, low, high) {
        $("#stockItemId").val(id);
        $("#stockItemName").val(name);
        $("#stockItemMyPrice").val(myPrice);
        $("#stockItemLow").val(low);
        $("#stockItemHigh").val(high);

        $("#stockItemName").attr('readonly', 'readonly');
        $("#stockItemName").unautocomplete();
    }
</script>

</body>
</html>